
<template>
  <div class="common-layout" >
    <el-container >
      <el-header>
        <div class="header-content">
          <img  style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
          <div>
            <img src="@/img.png" alt="Logo-text" style="height: 45px;margin-top: 30px" class="header-logotext">
            <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
          </div>
          <div class="avatar" >
            <el-avatar :size="55" :icon="UserFilled" />物业A
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside" >
          <el-menu router default-active="1">
            <el-menu-item style="height: 100px" index="announcement-management" class="first">
              <el-icon><location /></el-icon>
              <span>公告发布</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="complaints-management">
              <el-icon><icon-menu /></el-icon>
              <span>投诉管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="visitor-management">
              <el-icon><document /></el-icon>
              <span>访客通行</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="park-management">
              <el-icon><setting /></el-icon>
              <span>车位管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="maintenance-management">
              <el-icon><setting /></el-icon>
              <span>报事处理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="payment-management">
              <el-icon><setting /></el-icon>
              <span>缴费记录</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <el-main class="main">
          <router-view></router-view>
          <div class="issue-title"><h2>公告发布</h2></div>
          <el-divider></el-divider>
          <div class="announcement-box">
            <el-form ref="form" :model="announcementform" label-width="80px">
              <el-form-item label="发布对象">
                <el-select v-model="announcementform.noticeTo" placeholder="请选择事项类型">
                  <el-option label="用户" value="0"></el-option>
                  <el-option label="商家" value="2"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="公告内容">
                <el-input type="textarea" v-model="announcementform.noticeText"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(announcementform)">提交</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="upload-section">
            <h2>图片上传</h2>
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import {
  View,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import *as announcement from '../api/announcement-management'


import {ElMessage} from "element-plus";
const activeIndex = ref('1')

const announcementform = reactive({
  noticeText:'',
  noticeTo:'',
  noticeType:"公告",
  userId:'all',

});

const submitForm = () => {
  console.log(announcementform);
  const noticeForm = { ...announcementform };
  announcement.announcement_add(noticeForm).then(res => {
    console.log(res);
    ElMessage.success('提交成功！');
    // 可以在此处添加额外的操作，如页面跳转
  }).catch(error => {
    console.error('提交失败:', error);
    ElMessage.error('提交失败，请重试！');
  });
};

const resetForm = (formName) => {
  const formRef = ref(null); // 同样，确保在模板中对formRef进行了绑定
  formRef.value.resetFields();
};



</script>
<style scoped>

.issue-title {
  text-align: left;
  margin-left: 80px;
  margin-top: 40px; /* 可选，为下部内容添加一些间距 */
}
.announcement-box {
  width: 500px;
  height: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border-radius: 4px; /* 给盒子添加圆角 */
  border: 1px solid #DCDFE6;
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 200px;
  margin-top: 80px;
}
/* 调整表单组件的宽度以适应.box大小 */
.announcement-box .el-form-item__label {
  width: 500px; /* 根据需要调整label宽度 */
}

.announcement-box .el-input,
.announcement-box .el-textarea {
  width: 100%; /* 让输入框和文本区域宽度自适应容器 */
}

/* 调整文本区域的高度 */
.announcement-box .el-textarea__inner {
  height: 120px; /* 根据需要调整文本区域高度 */
}

/* 如果需要调整字体大小 */

.upload-section {
  width: 500px;
  height: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border: 1px solid #DCDFE6;
  border-radius: 4px; /* 给盒子添加圆角 */
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 800px;
  margin-top: -500px;
  display: flex; /* 引入Flex布局 */
  flex-direction: column; /* 设置Flex方向为列 */
  justify-content: center; /* 垂直居中对齐 */
  align-items: center; /* 水平居中对齐 */
}
.upload-demo {
  width: 100%; /* 图片上传组件宽度100%，以适应容器 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 保证上传图标与提示文本居中 */
}

/* 确保提示文本也在上传框内居中 */
.el-upload__text {
  text-align: center;
}
.common-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* 隐藏滚动条 */
}
.avatar{
  margin-left: 400px;
}
.header-logo {
  float: left;
  width: 100px;
  height: auto;
  margin-top: 10px;
  margin-left: -175px;
}
.header-logotext{
  margin-top: 40px;
}
.header-content {
  display: flex;
  align-items: center;
  border-width: 1px;
  border-bottom-style: groove;
  border-bottom-color:#cccccc;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 100%; /* 可根据实际情况调整，确保内容不会溢出 */
}

.aside {
  position: absolute;
  top: 160px;
  left: 0;
  bottom: 0;
  width: 200px;
  height: calc(100% - 60px);
  border: 1px solid #ccc;
}
span {
  font-size: 18px;
}
.first{
  margin-top: 0px;
}
.main {
  flex: 1; /* main占据剩余空间 */
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 200px;
  right: 0;
  bottom: 0;
  //flex-direction: row;
}
.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0px 20px; /* 添加内边距以防止内容贴近边缘 */
}
</style>